<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        width: 253px;
        height: 342px;
        border: 1px solid #e5e5e5;
        margin: 10px auto;
        text-align: center;
      }

      .container .top {
        height: 226px;
      }

      .container .top img {
        padding-top: 19px;
      }

      .container .top span {
        padding-top: 19px;
        display: block;
        font-size: 15px;
        color: #89756a;
      }

      .container .bottom {
        height: 116px;
        background-color: #f8f8f8;
      }

      .container .bottom .tags {
        display: inline-block;
        padding-top: 15px
      }

      .tag{
        border-radius: 2px;
        color: white;
        padding: 2px 4px;
        font-size: 12px;
      }

      .living {
        background: -webkit-linear-gradient(
          to right,
          #904e95,
          #e96443
        ); /* Chrome 10-25, Safari 5.1-6 */
        background: linear-gradient(
          to right,
          #904e95,
          #e96443
        ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
      }

      .discount{
        border: 1px solid orangered;
        color: orangered;
      }

      .normal{
        border: 1px solid #4284db;
        color: #4284db;
      }

      .product-name{
        padding-top: 15px;
        font-size: 20px;
        font-style: bold;
        color: #333;
      }

      .price{
        padding-top: 5px;
        font-size: 20px;
        font-style: bold;
        color: #A71609;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="top">
        <img src="/src//img/kettle.png" alt="" />
        <span>快速煮水,安心引用</span>
      </div>
      <div class="bottom">
        <div class="tags">
          <span class="tag living">直播中</span>
          <span class="tag discount">特惠</span>
          <span class="tag normal">30天保价</span>
          <span class="tag normal">售后免邮</span>
        </div>

        <div class="product-name">
            云米电水壶
        </div>

        <div class="price">
            $59.00
        </div>
      </div>
    </div>
  </body>
</html>
